<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      newTag: ''
    }
  },

  methods: {
    addTag () {
      console.log('this.newTag', this.newTag)
      if (this.newTag.trim().length === 0 || this.value.includes(this.newTag.trim())) {
        return
      }

      this.$emit('input', [...this.value, this.newTag.trim()])
      this.newTag = ''
    },

    removeTag (tag) {
      this.$emit('input', this.value.filter(t => t !== tag))
    }
  },

  render () {
    console.log('this.$scopedSlots', this.$scopedSlots)
    return this.$scopedSlots.default({
      tags: this.value,
      addTag: this.addTag,
      removeTag: this.removeTag,
      inputEvents: {
        input: e => {
          this.newTag = e.target.value
          console.log('inpnt this.newTag', this.newTag)
        },

        keydown: e => {
          if (e.keyCode === 13) {
            e.preventDefault()
            this.addTag()
          }
        }
      },
      inputAttrs: {
        value: this.newTag
      }
    })
  }
}
</script>
